<template>
  <div class="login_mian">
    <div class="mindWidth login_top" v-if="!isLogin">
      <img
        src="../../../static/image/login/logo.png"
        @click="$router.push('/')"
        alt
        class="changeHanld"
      />
    </div>
    <div class="bg_mian" v-if="!isLogin">
      <div class="mindWidth main_content_item">
        <div class="main_L">
          <h3>关注我们 了解更多</h3>
          <img :src="imgBaseUrl + codeImg" />
        </div>
        <div class="main_center">
          <img src="../../../static/image/login/model.png" alt />
        </div>
        <div class="main_R">
          <div class="main_R-t">
            <h3>会员登录</h3>
          </div>
          <div class="login_title">
            <span
              v-for="(item, index) in loginTitle"
              :key="index"
              class="changeHanld"
              :class="titleIndex === index ? 'active' : ''"
              @click="titleIndex = index"
            >{{ item }}</span>
          </div>
          <mobileLogin v-show="titleIndex == 0" />
          <passwordLogin v-show="titleIndex == 1" />

          <div class="main_R-b">
            <span>第三方登录</span>
            <img
              class="changeHanld"
              src="../../../static/image/login/wechat.png"
              alt
              @click="scanLogin"
            />
          </div>
        </div>
      </div>
    </div>
    <loginCode v-show="isLogin" :isLogin="isLogin" @isShowCode="changeShow" />
  </div>
</template>

<script>
import passwordLogin from "../../components/login_item/passwordLogin.vue";
import mobileLogin from "../../components/login_item/mobileLogin.vue";
import { get, post } from "../../http/axios.js";
import loginCode from "../../components/login_item/loginCode.vue";
import { getDomainConfig } from "../../api/api.js"; // 数据请求接口
import { imgBaseUrl } from "../../api/api.js";
export default {
  components: {
    passwordLogin,
    mobileLogin,
    loginCode
  },
  data() {
    return {
      titleIndex: 0,
      loginTitle: ["快捷登录", "密码登录"],
      isLogin: false,
      codeImg: "",
      imgBaseUrl: imgBaseUrl
    };
  },
  mounted() {
    this.getCodeImg();
  },
  methods: {
    scanLogin() {
      this.isLogin = true;
    },
    changeShow(val) {
      this.isLogin = val;
    },
    getCodeImg() {
      getDomainConfig({ configKey: "HOME_PAGE_WE_CHAT_QR_CODE" }).then(res => {
        this.codeImg = res.result.configValue;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.login_mian {
  background-color: #fff;
}
.login_top {
  display: flex;
  align-items: center;
  background-color: #fff;
  height: 80px;
}
.login_title {
  height: 70px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  span {
    font-size: 18px;
    color: #999999;
    position: relative;
    &.active {
      color: #44a2ff;
      &::before {
        position: absolute;
        height: 4px;
        content: "";
        bottom: -10px;
        width: 100%;
        border-bottom: 3px solid #44a2ff;
      }
    }
  }
}
.bg_mian {
  width: 100%;
  height: 640px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: 100% 100%;
  overflow: hidden;
  background-image: url("../../../static/image/login/bg.png");
  .main_content_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    h3 {
      margin-bottom: 20px;
      color: #fff;
      font-size: 24px;
    }
  }
  .main_L {
    img {
      width: 120px;
      height: 120px;
    }
  }
  .main_R {
    width: 360px;
    height: 460px;
    background-color: #fff;
    .main_R-t {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      width: 100%;
      height: 90px;

      background-image: url("../../../static/image/login/banner3.png");
      h3 {
        color: #44a2ff;
        font-size: 20px;
        font-weight: 400;
      }
    }

    .main_R-b {
      display: flex;
      align-items: center;
      height: 80px;
      padding-left: 10px;
      background-image: url("../../../static/image/login/banner3.png");
      span {
        font-size: 14px;
        color: #44a2ff;
      }
      img {
        width: 20px;
        margin: 0 15px;
      }
    }
  }
}
.footer_text {
  height: 60px;
  font-size: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
